<template>
	<view class="card-friends-wrap">
		<navBar title="身边卡友" :showHome="false" :showBack="true" marginLeft="30%" />
		<view class="content-box" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<scroll-view scroll-y="true" style="height: 100%;"
				@refresherrefresh="refreshData" @scrolltolower="pullData" refresher-enabled="true" :refresher-triggered="triggered"
				refresher-background="#CF1A1B">
				<view class="list">
					<view class="item" v-for="item in RealTimeRecording" :key="item.key">
						<image
							:src="item.headImgUrl?item.headImgUrl:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_avatar.png'">
						</image>
						<view class="msg-info">
							<view class="info">
								{{ item.content }}
							</view>
							<view class="time" v-if="item.time[0] >= 3">{{ item.createdTime.split(' ')[0] }}</view>
							<view class="time" v-else-if="item.time[0]">{{ item.time[0] }}天前</view>
							<view class="time" v-else-if="item.time[1]">{{ item.time[1] }}小时前</view>
							<view class="time" v-else-if="item.time[2]">{{ item.time[2] }}分钟前</view>
							<view class="time" v-else="item.time[3]">{{ item.time[3] }}秒前</view>
						</view>
					</view>
				</view>
				<view class="load-more" v-if="RealTimeRecording.length != 0">
					<u-loadmore :status="loadingStatus" :font-size="28" :icon-size="28" />
				</view>
			</scroll-view>	
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		name: 'card-friends',
		components: {
			navBar
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
			...mapGetters('user', ['getUserInfo'])
		},
		data() {
			return {
				RealTimeRecording: [],
				triggered:false,
				loadingStatus: 'loadmore',
				total: 0,
				pageNum:1
			}
		},
		methods: {
			//设置等待时间
			formatTime(startTime, endTime) {
				var date1 = new Date(startTime.replace(/-/g, '/')).getTime()
				var date2 = endTime ? new Date(endTime.replace(/-/g, '/')).getTime() : new Date().getTime();
				var date3 = date2 - date1;
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				if (days < 0) {
					days = days * (-1)
				}
				var leave1 = date3 % (24 * 3600 * 1000);
				var hours = Math.floor(leave1 / (3600 * 1000));
				var leave2 = leave1 % (3600 * 1000);
				var minutes = Math.floor(leave2 / (60 * 1000));
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				return [days, hours, minutes, seconds]
			},
			// 初始化页面
			async initData() {
				try {
					const res = await this.$request({
						url: `/terminal-serve-center/carOwnerBehavior/list?pageSize=20&pageNum=${this.pageNum}&userId=${this.getUserInfo.id}`,
						method: 'get'
					})
					res.datas.data.forEach(item => {
						item.key = new Date().getTime()
						item.time = this.formatTime(item.createdTime)
					})
					this.RealTimeRecording = this.RealTimeRecording.concat(res.datas.data)
					this.total = res.datas.count
					res.datas.data.length < 20 ? (this.loadingStatus = 'nomore') : (this.loadingStatus =
						'loadmore');
					uni.hideLoading()
					this.triggered = false
				} catch (e) {
					this.triggered = false
				}
			},
			refreshData() {
				this.RealTimeRecording = []
				this.triggered = true
				this.pageNum = 1
				this.loadingStatus = 'loadmore'
				this.initData()
			},
			pullData() {
				if (this.total == this.RealTimeRecording.length) {
					this.loadingStatus = 'nomore'
					this.triggered = false
					return false
				}
				this.pageNum++
				this.loadingStatus = 'loading';
				this.initData()
			},
		},
		onShow() {
			this.initData()
		}
	}
</script>

<style scoped lang="scss">
	.card-friends-wrap {
		height: 100%;
		width: 100%;
		overflow: hidden;
		.load-more{
			padding-bottom:200rpx;
		}
	}

	.content-box {
		padding: 0 20rpx;
		height: calc(100% - 104rpx);
		.list {
			padding: 20rpx 0;

			.item {
				display: flex;
				align-items: center;
                padding: 15rpx 10rpx;
				margin-bottom: 20rpx;
				background: #fff;
				border-radius: 16rpx;
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}

				.msg-info {
					display: flex;
					align-items: center;
					width: calc(100% - 60rpx);
					justify-content: space-between;

					.info {
						padding-left: 20rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						width: calc(100% - 140rpx);
					}

					.time {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						width: 140rpx;
						text-align: right;
					}
				}
			}
		}
	}
</style>